<template>
  <!-- 首页 -->
  <div class="indexPage-container">
    <HomeNav />
    <a-row :gutter="20" type="flex" style="height: 100%">
      <a-col :span="16" style="height: 100%; padding-right: 5px" class="right-container-wrapper width-ios-left">
        <a-card class="card-10-padding CompanyMap">
          <CompanyMap />
          <!-- <CompanyNews /> -->
        </a-card>
        <!-- 定制常用功能菜单 -->
        <!-- 新闻 -->
        <!-- <a-card class="CompanyNews todo-list-card">
         <CompanyNews />
        </a-card> -->
      </a-col>
      <a-col :span="8" style="height: 100%" class="right-container-wrapper width-ios-right">
        <a-card :bordered="false" class="card-no-padding">
          <!-- 天气 -->
          <WeatherView />
        </a-card>
        <a-card class="msg-card card-no-padding">
          <TodoList />
        </a-card>
        <div>
          <CustomModule />
        </div>
        <div>
          <ExtendModules />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import CompanyNews from './components/CompanyNews.vue'
import CustomModule from './components/CustomModule.vue'
import TodoList from './components/TodoList.vue'
import WeatherView from './components/WeatherView.vue'
import MsgNotify from './components/MsgNotify.vue'
import ExtendModules from './components/ExtendModules.vue'
import CompanyMap from './components/companyMap.vue'
import HomeNav from './components/homeNav.vue'

export default {
  name: 'IndexPage',
  components: {
    CompanyNews,
    CustomModule,
    TodoList,
    WeatherView,
    MsgNotify,
    ExtendModules,
    CompanyMap,
    HomeNav
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="less" scoped>
@deep: ~'>>>';
.card-no-padding {
  @{deep} .ant-card-body {
    padding: 0;
  }
}
.card-10-padding{
  @{deep} .ant-card-body {
    padding: 0;
  }
}
.indexPage-container {
  position: relative;
  padding: 20px;
  height:calc(100% - 40px) !important;
  min-width: 1000px !important;
}
.right-container-wrapper {
  display: flex;
  flex-direction: column;
}


.msg-card {
  overflow: hidden;
  flex: auto;
  padding: 0;
  background: #ffffff;
  @{deep} .ant-card-body {
    height: 100%;
    // display: flex;
    // flex-direction: column;
  }
}
.todo-list-card{
  margin-bottom: 0;
  flex: 1;
  margin-bottom: 0;
   @{deep}.ant-card-body{
    padding: 12px 10px;
  }
}
.CompanyMap{
  height: 100%;
  margin: 0;
}
.CompanyNews{
  height: 40%;
}
@media screen and (max-width: 1450px) {
  .indexPage-container {
    .ant-card{
      margin-bottom: 10px;
    }
    .todo-list-card{
      margin-bottom: 0;
    }
    padding: 10px;
     @{deep} .play-item-box {
      // height: 32vh;
      .play-item-img {
        // width: 65%;
        // height: 100%;
      }
      .play-item-article {
        // width: calc(100vw - 65vw - 16px);
        .article-title {
          font-size: 14px;
          line-height: 1.5em;
          padding-bottom: 10px;
        }
        .article-content {
          line-height: 1.5em;
          font-size: 12px;
        }
      }
    }
    @{deep} .custom-wrapper {
      .custom-content
      .custom-item {
        margin-right: 30px;
        .custom-item-icon{
          height: 36px;
          width: 36px;
          border-radius: 10px;
          font-size: 20px;
        }
        .custom-item-desc {
          font-size: 12px;
          padding-top: 0px;
        }
      }
      .custom-btns  {
        .add-btn {
          height: 36px;
          width: 36px;
          border-radius: 10px;
          .add-btn-icon {
            font-size: 20px;
          }
        }
        .btn-desc{
          padding-top: 0px;
        }
      }
    }
    .todo-list-card{
      @{deep}.ant-card-body{
        padding: 10px;
      }
    }
  }
}
@media screen and (min-width: 1930px) {
  .indexPage-container {
     @{deep} .play-item-box {
      // height: 36vh;
      .play-item-article{
        .article-title {
          font-size: 26px;
          line-height: 1.5em;
          padding-bottom: 20px;
        }
        .article-content {
          line-height: 1.5em;
          font-size: 20px;
        }
      }
    }
    @{deep}  .weather-info-wrapper{
      .date-info,.tip-info{
        font-size: 18px;
      }
    }
    @{deep} .extend-item-content{
      & > p {
        height: calc(var(--heightVh) * 0.05);
        line-height: calc(var(--heightVh) * 0.05);
        font-size: 18px;
      }
    }
  }
}
.width-ios-left{
    width: 63%;
   }
.width-ios-right{
    width: 37%;
  }
@media screen and (min-width: 1400px) and (max-width: 1440px) {
  .width-ios-left{
    width: 56%;
   }
   .width-ios-right{
     width: 44%;
   }
  }

  @media screen and (min-width: 1200px) and (max-width: 1370px) {
  .width-ios-left{
    width: 58%;
   }
   .width-ios-right{
     width: 42%;
   }
  }
</style>
